import { Input, message, Pagination, Popconfirm, Table } from "antd";
import Layout from "../Shared/Layout";
import MyButton from "../../Components/MyButton";
import { useCallback, useEffect, useState } from "react";
import { request } from "../../Api/api";
import AddExam from "../../Components/Operation/Exam/AddExam";

const ExamArrange = () => {
  const [examArrangeList, setExamArrangeList] = useState([]);
  const [page, setPage] = useState({ page: 1, limit: 10 });
  const [where, setWhere] = useState({ key: "" });
  const [total, setTotal] = useState(0);
  const [open, setOpen] = useState(false);
  const bind = useCallback(async () => {
    const res = await request("/Exam/Pagination", { ...page, ...where }, "GET");
    if (res.code >= 0) {
      setExamArrangeList(res.data.data);
      setTotal(res.data.total);
    }
  }, [page, where]);
  useEffect(() => {
    async function fetchData() {
      await bind();
    }
    fetchData();
  }, [bind]);
  const openAddModal = () => {
    setOpen(true);
  };
  const addExam = async (exam) => {
    const res = await request("/Exam/Add", exam, "POST");
    if (res.code >= 0) {
      setOpen(false);
      message.success(res.message);
      await bind();
      return true;
    } else {
      message.error(res.message);
      return false;
    }
  };
  const deleteExam = async (id) => {
    const res = await request("/Exam/Delete", { id }, "POST");
    if (res.code >= 0) {
      message.success(res.message);
      await bind();
    } else {
      message.error(res.message);
    }
  };
  const columns = [
    {
      title: "考试名称",
      dataIndex: "name",
      key: "name",
      width: 150,
      ellipsis: true,
    },
    {
      title: "开始时间",
      dataIndex: "beginTime",
      key: "beginTime",
      width: 150,
      ellipsis: true,
      render: (text) => {
        return new Date(text).toLocaleString();
      },
    },
    {
      title: "结束时间",
      dataIndex: "endTime",
      key: "endTime",
      width: 150,
      ellipsis: true,
      render: (text) => {
        return new Date(text).toLocaleString();
      },
    },
    {
      title: "备注",
      dataIndex: "explain",
      key: "explain",
      width: 150,
      ellipsis: true,
    },
    {
      title: "试卷",
      dataIndex: "testPaperName",
      key: "testPaperName",
      width: 150,
      ellipsis: true,
    },
    {
      title: "操作",
      key: "operation",
      render: (text, record) => (
        <div>
          <MyButton
            type="primary"
            className={"extra-btn"}
            onClick={() => {
              window.location.href = `/exam/examArrange/detail?id=${record.id}`;
            }}
          >
            查看
          </MyButton>
          <Popconfirm
            onConfirm={() => deleteExam(record.id)}
            title="确认删除吗？"
            okText="确认"
            cancelText="取消"
          >
            <span>
              <MyButton type="danger" className={"extra-btn"}>
                删除
              </MyButton>
            </span>
          </Popconfirm>
        </div>
      ),
      width: 200,
      ellipsis: true,
    },
  ];
  return (
    <Layout>
      <AddExam
        open={open}
        onCancel={() => setOpen(false)}
        onOk={addExam}
      ></AddExam>
      <div className="table-header">
        <div className="table-header-title">考试安排列表</div>
        <div className="table-header-middle">
          <Input
            value={where.key}
            onChange={(e) => setWhere({ key: e.target.value })}
            placeholder="搜索"
          />
        </div>
        <div className="table-header-operation">
          <MyButton type="success" onClick={openAddModal}>
            添加
          </MyButton>
        </div>
      </div>
      <div className="table-container">
        <Table
          bordered={true}
          sticky={true}
          rowKey={(record) => record.id}
          dataSource={examArrangeList}
          columns={columns}
          pagination={false}
          scroll={{ x: "max-content" }}
        />
        <Pagination
          total={total}
          current={page.page}
          pageSize={page.limit}
          onChange={(current, pageSize) =>
            setPage({ ...page, page: current, limit: pageSize })
          }
          showQuickJumper={true}
        />
      </div>
    </Layout>
  );
};

export default ExamArrange;
